<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {RouteRecordRaw, useRouter} from "vue-router";
import {usePermissionStore} from "@/store/modules/permission";
import {useStorage} from "@/hooks/web/useStorage";
import {loginApi, getExamApi} from "@/api/login";
import {useAppStore} from "@/store/modules/app";
import {ElMessage} from "element-plus";

import {useDevice} from "@/hooks/web/useDevice";
const {mobile} = useDevice()

const appStore = useAppStore()
const permissionStore = usePermissionStore()
const {setStorage, getStorage} = useStorage()
const {currentRoute, addRoute, push} = useRouter()
let loading = ref(false)

let formFef = ref()
const loginForm = reactive({
  name: '',
  idnum: '',
  exam_num: '',
})

//登录表单验证
const rules = {
  name: [{required: true, message: '请输入姓名'}],
  idnum: [{required: true,message: '请输入身份证号' }],
  exam_num: [{required: true, message: '请输入准考证号' }],
}



const handleLogin = () => {
  formFef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      let formData = loginForm
      console.log(formData);
      try {
        const res = await loginApi(formData)
        console.log(res);
        if (res) {
          setStorage('userInfo', res.data)
          getRole()
          ElMessage({message: '登录成功', type: 'success'})
        }
      } finally {
        loading.value = false
      }
    }
  })
}


const handleReset = () => {
  formFef.value.resetFields()
}


const getRole = async () => {
  console.log('getUserInfo',)
  let {is_admin} = getStorage('userInfo')
  let routers = ['']
  let toPath = ''
  if (is_admin) {
    toPath = '/result/index'
    routers = [
      '/',
      '/result',
      '/result/index',
      '/result/result-info',
      '/account',
      '/account/index',
      '/account/account-insert',
      '/account/account-edit',
    ]
  } else {
    toPath = '/'
    routers = ['/']
  }
  setStorage('roleRouters', routers)
  await permissionStore.generateRoutes('frontEnd', routers).catch(() => {
  })
  permissionStore.getAddRouters.forEach((route) => {
    addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
  })
  permissionStore.setIsAddRouters(true)
  push({path: toPath})
}

</script>

<template>
  <div class="bg-img">

  </div>
  <img src="" alt="" >
  <el-row justify="center">
    <el-col :lg="8" class="login-box" :md="10" :xs="23">
            <img src="/src/assets/imgs/loginLogo1.png" alt="暨南大学经济学院·国际本科-2024级新生入学笔试" >
      <p class="jinan">
        <span>暨南大学经济学院·国际本科</span>
      </p>
      <h1>2024级新生入学笔试</h1>
      <div class="login-wrap">
        <p class="enter">登录</p>
        <el-form  label-width="80px" :model="loginForm" ref="formFef" :rules="rules"
                 :hide-required-asterisk="true">
          <el-form-item label="姓    名" prop="name">
            <el-input placeholder="请输入姓名" v-model="loginForm.name"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idnum">
            <el-input placeholder="请输入身份证号" v-model="loginForm.idnum"></el-input>
          </el-form-item>
          <el-form-item label="准考证号" prop="exam_num">
            <el-input placeholder="请输入准考证号" v-model="loginForm.exam_num"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleLogin" class="login-btn" :loading="loading">登 录</el-button>
            <el-button plain @click="handleReset" style="color: #303133;">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<style scoped lang="less">
/deep/ .el-form-item__label{
  color:#303133 !important;
}
.login-box {
  text-align: center;
  margin-top: 100px;
  color: #fff;

  .jinan {
    margin: 50px auto 10px;
    font-size: 18px;

    span:nth-child(1) {
      margin-right: 5px;
    }

    span:nth-child(2) {
      font-size: 20px;
    }
  }

  .login-wrap {
    .enter {
      text-align: center;
      font-size: 18px;
      margin: 5px auto 20px;
      color: #333;
    }

    padding: 20px 40px;
    margin-top: 30px;
    background-color: #fff;
    box-shadow: 6px 9px 21px rgba(29, 79, 212, 0.14);
    border-radius: 20px;

    .el-input {
      height: 38px;
    }

    /deep/ .el-select__wrapper {
      min-height: 38px;
    }

    .el-button {
      min-width: 108px;
      height: 33px;
      text-align: center;
    }

    .login-btn {
      background-color: #af0c2b;
      color: #fff;
      border-color: #af0c2b;
    }
  }
}

.bg-img {
  position: absolute;
  width: 100%;
  height: 800px;
  background: url("/src/assets/imgs/bg.jpg") no-repeat;
  background-size: cover;
  z-index: -1;
}

p, h1 {
  margin: 0;
  padding: 0;
}


@media screen and (max-width: 768px) {
  .bg-img {
    width: 100%;
    height: 750px;
  }

  h1 {
    font-size: 23px;
  }

  .login-box {
    margin-top: 30px;

    .login-wrap {
      padding: 20px 10px;
      margin-top: 30px;

      .el-button {
        height: 35px;
        text-align: center;
      }
    }
  }
}
</style>